import React, { Component } from 'react'

export default class TodoList extends Component {
  changeState = (id) => {
    this.props.changeState(id)
  }
  delTodo = (e) => {
    e.preventDefault()
  }
  render() {
    const {todoList} = this.props

    // 列表循环
    const lis = todoList.map(item => (
      <li key={item.id} className='todo-item'>
        <span className={['todo-select', (item.state ? 'done' : '')].join(' ')} onClick={() => this.changeState(item.id)}></span>
        <span className='todo-body'>{item.body}</span>
        <a href="" onClick={this.delTodo}>删除</a>
      </li>
    )) 

    // 条件渲染
    const dom = todoList.length > 0 ? lis : <li>暂无数据</li>

    return (
      <div className='todo-list'>
        <ul>
          {dom}
        </ul>
      </div>
    )
  }
}
